<template>
  <el-dialog v-model="commentDialog" @close="handleCancel">
    <div class="comment-list">
      <!-- 使用 el-card 包裹每个评论项 -->
      <el-card 
        v-for="(comment, index) in comments"
        :key="index"
        shadow="hover"
        class="comment-item"
      >
        <div class="comment-header">
          <!-- 用户头像 -->
          <el-avatar 
            :size="50" 
            :src="comment.user_url" 
            class="user-avatar"
          >
            <img 
              src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
              alt="默认头像"
            />
          </el-avatar>

          <!-- 用户信息 -->
          <div class="user-info">
            <span class="user-name">{{ comment.user_wxname }}</span>
            <span class="user-think">评价等级</span>
            <!-- 评价等级 -->
            <el-tag 
              :type="comment.user_comments === '好看' ? 'success' : comment.user_comments === '一般' ? 'warning' :'danger'"
              size="small"
            >
              {{ comment.user_comments }}
            </el-tag>
          </div>

        <!-- 点赞数 -->
        <div class="like-box">
            <el-icon color="#F56C6C" class="like-icon">
            </el-icon>
            <span class="like-count">获赞数：{{ comment.like }}</span>
          </div>
        </div>
        <!-- 分隔线 -->
        <el-divider v-if="index < comments.length - 1" />
        <!-- 评论内容 -->
        <div class="comment-content">
          书评内容：<br>
          <el-text class="content-text">
            {{ comment.comments_content }}
          </el-text>
        </div>
      </el-card>
    </div>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { watch,ref } from 'vue'
import api from "../../api/api"

const props = defineProps({
  commentDialog: {
      type: Boolean,
      required: true
  },
  bookId: {
      type: String,
      default: ''
  }
})

const emit = defineEmits(['update:commentDialog', 'save'])
const comments = ref([])
watch(
  () => props.commentDialog,
  async (newVal) => {
      if (newVal && props.bookId!='') {
        try{
          await api.post('/getAllAdminComment', { bookId: props.bookId })
              .then(response => {
                  // console.log('评论数据：', response.data)
                  comments.value=response.data
                  console.log('评论数据：', comments.value)
              })
              .catch(error => {
                  console.error('请求失败:', error)
                  ElMessage.error('获取评论失败')
              })
            }catch (error) {
          ElMessage.error('获取评论失败')
        }
      }
  }
)

const handleCancel = () => {
  emit('update:commentDialog', false)
}
</script>

<style>
.comment-list {
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px;
}

.comment-item {
  margin-bottom: 16px;
  transition: all 0.3s;
}

.comment-item:hover {
  transform: translateY(-3px);
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.user-avatar {
  margin-right: 15px;
  flex-shrink: 0;
}

.user-info {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}
.user-think{
  font-size: 12px;
}
.like-box {
  display: flex;
  align-items: center;
  gap: 5px;
}

.like-icon {
  font-size: 18px;
  cursor: pointer;
  transition: color 0.3s;
}

.like-count {
  color: #606266;
  font-size: 14px;
}

.comment-content {
  margin-left: 5px; /* 与头像对齐 */
}

.content-text {
  font-size: 14px;
  line-height: 1.6;
  color: #606266;
  white-space: pre-wrap; /* 保留换行 */
}
</style>